<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css">
</head>
<body>
    <button type="submit" class="btn btn-primary">提交</button>

    <div class="container">
        <div class="row p-3" id="billing_details_overview">
            <div class="row p-3">
                <div class="col-md-13 p-3 text-center">...</div>
            </div>
            <div class="row p-3">
                <div class="col-md-12 p-3 text-center">...</div>
            </div>
        </div>
    </div>
    

    <!-- <script>
        let a = JSON.parse('[{"name":"A"}, {"name": "B"}]');
        console.log(a);
    </script> -->

    <form class="container user-order">
        <div class="form-group">
            <label class="form-label" for="">Product:</label>
            <select class="form-select" placeholder="11">
                <option value="default">请选择...</option>
                <option value="1">选项 1</option>
                <option value="2">选项 2</option>           
            </select>
            <input class="form-control" type="text" placeholder="Please enter the product you want to buy">
        </div>
        <div class="form-group">
            <label class="form-label" for="">Count:</label>
            <input class="form-control" type="text" placeholder="Please enter the quantity of the item to buy">
        </div>
    </form>

    <!-- <script>
        let form_select_element = document.getElementsByClassName("form-select")[0];
        console.log(form_select_element.value);
        console.log(form_select_element.length);
    </script>    -->

    <hr>

    <div class="container shopping-tab-pane-content-goods">
        <div class="container shopping-goods-header">
            <div class="row">
                <div class="col-md-4 border bg-light text-center">
                    <p class="mb-0 p-3">type</p>
                </div>
                <div class="col-md-4 border bg-light text-center">
                    <p class="mb-0 p-3">stock</p>
                </div>
                <div class="col-md-4 border bg-light text-center">
                    <p class="mb-0 p-3">selling_price</p>
                </div>
            </div>
        </div>

        <div class="container commdity-list">
            <div class="row a-commodity">
                <div class="col-md-4 border bg-light text-center">
                    <p class="mb-0 p-3">type</p>
                </div>
                <div class="col-md-4 border bg-light text-center">
                    <p class="mb-0 p-3">stock</p>
                </div>
                <div class="col-md-4 border bg-light text-center">
                    <p class="mb-0 p-3">selling_price</p>
                </div>
            </div>
        </div>  
    </div>


    <div class="container shopping-tab-pane-content-goods mt-5">
        <div class="row">
            <div class="col-md-4 border bg-light text-center">
                <p class="mb-0 p-3">fruit</p>
            </div>
            <div class="col-md-4 border bg-light text-center">
                <p class="mb-0 p-3">stock</p>
            </div>
            <div class="col-md-4 border bg-light text-center">
                <p class="mb-0 p-3">selling_price</p>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <h4 class="col-md-3 mb-0">Hello</h4>
        </div>
        <div class="row">
            <a class="btn btn-block btn-light col-md-2 offset-md-10 text-center come_in" href="#" data-businessman_name="?">Come in</a>
        </div>
    </div>


    <div class="container mt-5"> <!-- 使用 container 类来创建一个居中的容器，并添加一些上边距 -->
        <div class="row"> <!-- 使用 row 类来创建一个行 -->
          <div class="col-12 col-sm-6 col-md-12 text-center"> <!-- 使用 col 类来创建一个列，并设置响应式宽度 -->
            <div class="p-3 border bg-light"> <!-- 使用 padding、border 和背景色类来美化小块 -->
              <p class="mb-0">小块内容11</p> <!-- 使用段落标签来包含文字，并添加 mb-0 类来移除段落的下边距 -->
            </div>
          </div>
          <div class="col-12 col-sm-6 col-md-12 text-center"> <!-- 使用 col 类来创建一个列，并设置响应式宽度 -->
            <div class="p-3 border bg-light"> <!-- 使用 padding、border 和背景色类来美化小块 -->
              <p class="mb-0">小块内容11</p> <!-- 使用段落标签来包含文字，并添加 mb-0 类来移除段落的下边距 -->
            </div>
          </div>
        </div>
    </div>

    <!-- <div class="container">
        <div class="row">
            <div class="col-md-3 ml-md-3" style="background-color: aqua;">3</div>
        </div>
        <div class="row">
            <div class="col-lg-2 col-md-1" style="background-color: antiquewhite;">3</div>
        </div>
    </div> -->

    <!-- <script>
        let json_object = JSON.parse("{ \"table\":[{ \"name\":\"A\" },2,3] }");
        console.log(json_object);
        for (let i = 0; i < json_object.table.length; ++i)
        {
            console.log(json_object.table[i]);
        }

    </script> -->

</body>
</html>